<!doctype html>
<html lang="en" class="feedback">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/reading/note.css" />
	</head>

	<body>
		<div class="main">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<!--<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>-->
				<h1 class="mui-title">阅读笔记</h1>
			</header>
			<div class="mui-content">
				<div class="mui-content-padded">

					<!--快捷输入具体内容，开发者可自己替换常用语-->

				</div>
				<div class="row mui-input-row">
					<textarea id='question' class="mui-input-clear question" placeholder="请写一写，分享您的读书心得"></textarea>
					<div class="duoxaozi"><span>500</span>/500</div>
				</div>
				<br>
				<p class="plase"><span>请上传图片</span>（最多上传3张图片）</p>
				<div class="row image-list">
					<div id="image-list">

					</div>
					<div class="kuang"><img src="../../imges/Union 154.png" /></div>
				</div>
			</div>

			<div class="footer">
				<div class="jiaru"><button id="submit" type="button" class="mui-btn mui-btn-primary">提交</button></div>
			</div>
			<div class="prompt">
				<div class="prompt_text">
					<div class="prompt_noclass">恭喜你提交成功！！</div>
					<div class="prompt_new">+5<span>积分</span></div>
					<div class="prompt_newbutton prompt_a" id="note"><button type="button" class="mui-btn mui-btn-success">确定</button></div>
				</div>
				<div class="prompt_close"><img src="../../imges/Group 1010.png"></div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/common/common.js"></script>
		<script src="../../js/libs/immersed.js"></script>
		<script type="text/javascript">
			//			mui.init();
			mui.init({
				beforeback: function() {　　　　 //获得父页面的webview
					var list = plus.webview.currentWebview("Chapternumber.html").opener();　　　　 //触发父页面的自定义事件(refresh),从而进行刷新
					mui.fire(list, 'refresh');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var obj = self.parameter;
				var uid = obj.bookuid
				var num = $(".duoxaozi span").text()

				$("#question").on("keyup", function() {
					$(".duoxaozi span").text(num - $("#question").val().length)
				})
				mui('.mui-scroll-wrapper').scroll();
				var mask = mui.createMask(callback);
				//遮罩层
				

				function callback() {
					document.getElementsByClassName("prompt")[0].style.display = "none"
				}
				$(".prompt_close").on("tap", function() {
					callback()
					mask.close()
				})
				$(".prompt_a").on("tap", function() {
					callback()
					mask.close()
				})

				var kaiguan = false
				var server = common.urls + "batch/upload";
				var files = [];
				var index = 1;
				// 上传文件
				$(".footer").on("tap", function() {
					if(kaiguan) {
						return
					}
					if($("#question").val() == "") {
						mui.toast("消息不能为空!")
						return;
					}
					kaiguan = true
					if(files.length <= 0) {
						common.ajax("student/note/writeNote", {
							uid: common.uid,
							token: common.token,
							multiplePicture: "",
							bookUid: uid,
							noteContent: $("#question").val()
						}, function(data) {
							if(data.code == 200) {
								$("#question").val("")
								mask.show();
								document.getElementsByClassName("prompt")[0].style.display = "block"
							} else {
								mui.toast(data.message)
							}
						})
						return;
					}
					common.ajax("getQiNiuToken", {
						uid: common.uid,
						token: common.token
					}, function(data) {
						if(data.code == 200) {
							//						outSet("开始上传：")
							var wt = plus.nativeUI.showWaiting();
							var task = plus.uploader.createUpload(server, {
									method: "POST"
								},
								function(t, status) { //上传完成
									if(status == 200) {
										var imgUrl = JSON.parse(t.responseText).data

										console.log(t.responseText)
										console.log(imgUrl)
										common.ajax("student/note/writeNote", {
											uid: common.uid,
											token: common.token,
											multiplePicture: imgUrl,
											bookUid: uid,
											noteContent: $("#question").val()
										}, function(data) {
											if(data.code == 200) {
												$("#question").val("")
												mask.show();
												wt.close();
												kaiguan = false
												removebengdi();
												document.getElementsByClassName("prompt")[0].style.display = "block"
											} else {
												mui.toast(data.message)
											}
										})

									} else {
										console.log("上传失败：" + status);
										wt.close();
									}
								}
							);

							task.addData("token", data.data.qiNiutoken);

							for(var i = 0; i < files.length; i++) {
								var f = files[i];
								task.addFile(f.path, {
									key: f.name
								});
							}
							task.start();
						} else {
							mui.toast(data.message)
						}

					})
				})

				$(".kuang").on("tap", function() {
					var temp = ""
					plus.gallery.pick(function(e) {
						if(!($(".picture").length + e.files.length <= 3)) {
							files = []
						}
						for(var i in e.files) {
							compressImage(e.files[i])
							temp += '<div class="picture"><img src="' + e.files[i] + '"/><div class="remove"><img src="../../imges/Group 1073.png"/></div></div>'
						}
						if($(".picture").length + e.files.length <= 3) {
							$("#image-list").append(temp)
						} else {
							$("#image-list").html(temp)
						}
						rmove()
					}, function(e) {
						//					console.log("取消选择图片");
					}, {
						filter: "image",
						multiple: true,
						maximum: 3,
						system: false,
						onmaxed: function() {
							plus.nativeUI.alert('最多只能选择3张图片');
						}
					}); // 最多选择3张图片
				})

				
				function rmove() {
					$(".remove").on("tap", function() {
						plus.io.resolveLocalFileSystemURL(files[$(this).parents(".picture").index()].path, function(entry) {
							entry.remove();
						}, function() {
							console.log("删除失败!")
						});
						files.splice($(this).parents(".picture").index(), 1)
						$(this).parents(".picture").remove()
					})
				}

				function appendFile(p) {
					files.push({
						name: "uploadkey" + index,
						path: p
					});
					index++;
				}

				function compressImage(img) {
					plus.zip.compressImage({
							src: img,
							dst: img.slice(0, img.length - 4) + "zip" + (img.slice(-4)),
							quality: 100,
							overwrite: true
						},
						function(i) {
							appendFile(i.target)
						},
						function(e) {
							alert("压缩图片失败: " + JSON.stringify(e));
						});
				}
				var old_back = mui.back
				mui.back = function() {
					removebengdi()
					old_back()
				}
				$("#note").on("tap", function() {
					var load = plus.webview.getWebviewById("../Taskdetails/Taskdetails.html")
					if(load == null) {
						common.open("../Taskdetails/Taskdetails.html", "../Taskdetails/Taskdetails.html", obj)
					} else {
						plus.webview.close("Chapternumber.html")
						plus.webview.close("note.html", "slide-out-right")
						mui.fire(load, "shuaxin")
					}
				})

				function removebengdi() {
					$(".picture").remove()
					for(var i = 0; i < files.length; i++) {
						plus.io.resolveLocalFileSystemURL(files[i].path, function(entry) {
							entry.remove();
							files = []
						}, function() {
							console.log("删除失败!")
						});
					}
				}
			})
		</script>
	</body>

</html>